<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">

    <f:view contentType="text/html">
        <h:head>
            <f:facet name="first">
                <meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
                <title>.::ATUS::. Atención al Usuario</title>
                <link rel="shortcut icon" href="favicon.ico"/>
            </f:facet>
        </h:head>

        <h:body>
            <div>
                <h:graphicImage url="/atus/images/Banner.jpg" width="100%" height="100%" alt="LogoAtus"  style="vertical-align: top;"/> 
            </div>

            <p:panel>
                <p:panelGrid> 
                    <p:row>
                        <p:column style="vertical-align: top;">
                            <h:form>
                                <p:menu>
                                    <p:submenu label="Menú">                                
                                        <p:menuitem value="Inicio" url="/faces/atus/indexPuntoAtencion.xhtml" />
                                        <p:menuitem value="Turnos" url="/faces/atus/gestionTurnosPunto.xhtml" />
                                        <p:menuitem value="Consultas" url="/faces/atus/consultasTurnosPunto.xhtml" />
                                        <p:menuitem value="Reportes" url="/faces/atus/gestionReportesPunto.xhtml" />
                                        <p:menuitem value="Funcionario" url="/faces/atus/gestionFuncionarioPunto.xhtml" />
                                        <p:menuitem value="Cambio Contraseña" url="/faces/atus/CambiaPasswordPunto.xhtml" />
                                        <p:menuitem value="Cerrar Sesión" actionListener="#{usuariosAtusVista.cerrarSesion_action}" />
                                    </p:submenu>                    
                                </p:menu>
                            </h:form>
                        </p:column>
                        <p:column> 
                            <h:form id="formulario">                       
                                <p:panel id="panel" header="Reportes">
                                    <p:ajaxStatus onstart="PF('statusDialog').show();" oncomplete="PF('statusDialog').hide();"/>
                                    <p:messages id="mensajes" showDetail="true" closable="true" /> 
                                    <f:facet name="actions">
                                        <p:commandLink onclick="PF('helpDialog').show();" styleClass="ui-panel-titlebar-icon ui-corner-all ui-state-default"><h:outputText styleClass="ui-icon ui-icon-help" /></p:commandLink>
                                    </f:facet>
                                    <p:panelGrid id="pnlReporte" columns="2">
                                        <h:outputText value="Tipo de Reporte:"/>
                                        <p:selectOneMenu id="cmbTipoReporte" binding="#{reportesAtusVista.cmbTipoReporte}" > 
                                            <f:selectItem itemLabel="Seleccione" itemValue="-1" noSelectionOption="true"/>
                                            <f:selectItem itemLabel="Número de Clientes Atendidos en una Dependencia" itemValue="1" />
                                            <f:selectItem itemLabel="Número de Clientes Atendidos por Área" itemValue="2" />
                                            <f:selectItem itemLabel="Número de Clientes Atendidos por Cada Dependencia" itemValue="3" /> 

                                            <p:ajax listener="#{reportesAtusVista.onTipoChange}" update="panel" />
                                        </p:selectOneMenu>

                                        <h:outputText value="Dependencia:"/> 
                                        <p:selectOneMenu id="cmbDependencia" binding="#{reportesAtusVista.cmbDependencia}" > 
                                            <f:selectItem itemLabel="Seleccione" itemValue="" noSelectionOption="true"/>
                                            <f:selectItems value="#{reportesAtusVista.itemsDependencia}" /> 
                                            <p:ajax listener="#{reportesAtusVista.onDependenciaChange}" update="cmbArea" />
                                        </p:selectOneMenu>                                    

                                        <h:outputText value="Area:"/>
                                        <p:selectOneMenu id="cmbArea" binding="#{reportesAtusVista.cmbArea}" >
                                            <f:selectItem itemLabel="Seleccione" itemValue="" noSelectionOption="true"/>
                                            <f:selectItems value="#{reportesAtusVista.itemsArea}" /> 
                                        </p:selectOneMenu> 

                                        <h:outputText value="Fecha Inicio:"/>
                                        <p:calendar  id="calFechaIni" value="#{reportesAtusVista.fechaIni}" pattern="yyyy-MM-dd" />                                    
                                        <h:outputText value="Fecha Final:"/>
                                        <p:calendar  id="calFechaFin" value="#{reportesAtusVista.fechaFin}" pattern="yyyy-MM-dd" />

                                        <f:facet name="footer"> 
                                            <div align="center"> 
                                                <p:commandButton id="btnGenerar" value="Generar" binding="#{reportesAtusVista.btnGenerar}" action="#{reportesAtusVista.generarReporte_action}" update="panel"/>
                                                <p:commandButton id="btnLimpiar" value="Limpiar" binding="#{reportesAtusVista.btnLimpiar}" action="#{reportesAtusVista.limpiar_action}"  update="pnlReporte"/>
                                            </div>
                                        </f:facet>
                                    </p:panelGrid> 
                                </p:panel>
                                <!-- dialogo de ayuda -->
                                <p:dialog id="modalDialog" header="Ayuda" widgetVar="helpDialog" showEffect="fade" hideEffect="explode" modal="true" dynamic="true">  
                                    <p align="justify">                       
                                        En esta página usted podrá:<br/><br/>
                                        <b>-Generar Reporte Número de Clientes Atendidos en una Dependencia:</b> Primero seleccione en Tipo la opción respectiva. Luego seleccione la dependencia sobre la cual
                                        generará el reporte e ingrese un rango de fechas para filtrar los turnos y luego dar clic en el botón Generar.
                                        <br/><br/>
                                        <b>-Generar Reporte Número de Clientes Atendidos por Área:</b> Primero seleccione en Tipo la opción respectiva. Luego seleccione la dependencia y seguido a esto el área sobre la cual
                                        generará el reporte e ingrese un rango de fechas para filtrar los turnos y luego dar clic en el botón Generar.
                                        <br/><br/>
                                        <b>-Generar Reporte Número de Clientes Atendidos por Cada Dependencia:</b> Primero seleccione en Tipo la opción respectiva. En este reporte solo debe ingresar un rango de fechas para 
                                        filtrar los turnos y luego dar clic en el botón Generar.
                                        <br/><br/>
                                        <u>Nota:</u> El reporte <u>Número de Clientes Atendidos por Cada Dependencia</u> se genera por todas las dependencias existentes, por tanto solo es necesario las fechas
                                        para su generación.
                                        <br/>             
                                    </p>
                                </p:dialog>  

                                <p:dialog modal="true" widgetVar="statusDialog" header="Cargando..."   
                                          draggable="false" closable="false">  
                                    <p:graphicImage value="/atus/images/ajaxLoadingBar.gif" />  
                                </p:dialog>
                            </h:form> 
                        </p:column>
                    </p:row>
                </p:panelGrid>
            </p:panel> 
            <div>
                <h:graphicImage url="/atus/images/Pie.jpg" width="100%" height="100%" alt="LogoAtus"  style="vertical-align: bottom;"/>
            </div>
        </h:body>
    </f:view>
</html>

